import {
  ProFormText,
} from "@ant-design/pro-components";
import { Form, Col, Row } from "antd";
import { channel2_4, channel5_8, htmode2_4, htmode5_8 } from "./data";
import { check_32_bytes_string } from "./Validator";


const GroupFormFieldsModule = ({ namePrefix }: any) => {
  // Determine the RF type and assign it to the corresponding option
  let channel: any = [];
  let htmode: any = [];
  if (namePrefix === "radio2_4") {
    channel = channel2_4;
    htmode = htmode2_4;
  } else if (namePrefix === "radio5_8") {
    channel = channel5_8;
    htmode = htmode5_8;
  }

  return (
    <div>
      <br />
      <ProFormText
        name={[namePrefix, "groupName"]}
        label="分组名称"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        placeholder={'中英最大32个字符长度'}
        rules={[{
          required: false, validator: (rule, value, callback) => {
            // if encryption's and key's value is 'none', then don't validate the filed of 'key'
            return Promise.resolve(check_32_bytes_string(rule, value, callback, "group name invalid"));
          },
        }]}
      />
      <ProFormText
        name={[namePrefix, "groupId"]}
        label="分组ID"
        placeholder={"自动生成"}
        disabled
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      />
      <ProFormText
        name={[namePrefix, "createAt"]}
        label="创建时间"
        placeholder={"自动生成"}
        disabled
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      />
    </div>
  );
};

const columnsConfig = [
  { xs: 24, sm: 18, md: 16, lg: 16, xl: 16, name: "group", label: "基本设置" },
];

export default () => {
  return (
    <Row gutter={[48, { xs: 8, sm: 16, md: 24, lg: 32, xl: 40 }]}>
      {columnsConfig.map((config, index) => (
        <Col key={index} {...config}>
          <span className="Form-Item-Title-Span">{config.label}</span>
          <GroupFormFieldsModule namePrefix={config.name} />
        </Col>
      ))}
    </Row>
  );
};
